<template>
    <img v-if="isImage" class="file-image" :src="data.url" alt="" />
    <BhSvgIcon  size="100%" :name="getFileImg" v-else/>
  </template>
  <script setup lang="ts">
  defineOptions({ name: 'FileImage' });
  import { FileIcon, ImageTypes } from '@/types/file'
  import type { QueryResponse } from '@/api/system/file'
  interface Props {
    data: QueryResponse
  }

  const props = withDefaults(defineProps<Props>(), {})

  // 是否是图片类型文件
  const isImage = computed(() => {
    const extension = props.data.extension.toLowerCase()
    return ImageTypes.includes(extension)
  })
  // 获取文件图标，如果是图片就显示图片
  const getFileImg = computed<string>(() => {
    const extension = props.data.extension.toLowerCase()
    if (ImageTypes.includes(extension)) {
      return props.data.url || ''
    }else{
      if (!Object.keys(FileIcon).includes(extension)) {
        return FileIcon.other
      }
      return FileIcon[extension]
    }
  })
  </script>


<style scoped lang="less">
.file-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>